<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人资料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/resize.js" ></script>
		<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
		<script type="text/javascript" src="js/common.js" ></script>
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<div class="warp">
					<a href="javascript:;" class="return-btn fl"></a>
					个人资料
					<a href="javascript:;" class="nav fr" data-click="on"></a>
					<ol class="menu-down">
						<li><a href="index.html">首 页</a></li>
						<li><a href="teacherList.html">教员库</a></li>
						<li><a href="applyfor.html">快速请家教</a></li>
						<li><a href="xueyuanList.html">学员库</a></li>
						<li><a href="parentFeedback.html">家长反馈</a></li>
					</ol>
				</div>
			</div>
			<div class="infotopBox">
				<div class="infoTil">
					<img src="images/infoIcon.png"/>
					<span>请完善您的个人资料，方便为您匹配家教订单</span>
				</div>
				<div class="avtarBox clearfix">
					<div class="avtar fl">
						<img src="images/avtar.jpg"/>
					</div>
					<div class="fl avtarTip">编辑头像</div>
				</div>
				
			</div>
			<!--表单-->
			<div class="infoBox infoBox2">
				
			   <form action="" method="post" class="loginForm msgForm">
			   	
				   	<div class="bgwhite infoBoxpart infoBoxpart2">
				   		<div class="infoLine">
				   			<span>基本信息</span>
				   		</div>
					<div class="clearfix pl_15">
						<label class="fl">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="小优" class="" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="女" class="" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="12345678965" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">身份证号:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="12345678965" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">出生年月:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="1995" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="重庆" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:</label>
						<div class="fl">
							<select class="selectBox">
								<option>大学毕业</option>
								<option>本科</option>
								<option>高中</option>
							</select>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">所学专业:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="计算机" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;校:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="上海师范大学" readonly="readonly"/>
						</div>
					</div>
					
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">高中母校:</label>
						<div class="inputBox fl getinforInput">
							<input type="text" value="垫江一中" readonly="readonly"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">目前身份:</label>
						<div class="fl">
							<select class="selectBox">
								<option>自学考试生</option>
								<option>老师</option>
								<option>学生</option>
							</select>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">详细地址:</label>
						<div class="inputBox fl">
							<input type="text" placeholder="重庆市渝中区解放碑"/>
						</div>
					</div>
				 </div>
				 <div class="bgwhite  infoBoxpart inforPart2">
				 	<div class="infoLine">
				   			<span>基本信息</span>
				   	</div>
				 	<div class="clearfix pl_15">
						<label class="fl">教授科目:</label>
						<div class="fl">
							<select class="selectBox">
								<option>初中</option>
								<option>高中</option>
								<option>小学</option>
							</select>
						</div>
					</div>
					<div class="clearfix pl_15">
						<ul class="fl subject chooseInfo">
							<li attr-click = on>初一英语</li>
							<li attr-click = on>初二英语</li>
							<li attr-click = on>初三英语</li>
							<li attr-click = on>高一英语</li>
							<li attr-click = on>高二英语</li>
							<li attr-click = on>高三英语</li>
						</ul>
						<ul class="fl  subjectright  chooseInfo">
						</ul>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">教课区域:</label>
					</div>
					<div class="clearfix  pl_15">
						<ul class="fl teachArea  chooseInfo">
							<li attr-click = on>璧山</li>
							<li attr-click = on>万州</li>
							<li attr-click = on>铜梁</li>
							<li attr-click = on>合川</li>
							<li attr-click = on>万盛</li>
							<li attr-click = on>云阳</li>
						</ul>
						<ul class="fl  teachArearight  chooseInfo">
						</ul>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">详细描述:</label>
						<div class="textareaBox fl">
							<textarea></textarea>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">辅导方式:</label>
						<div class="charWrap fl">
							<span>
								<input type="checkbox" name="sex"/>
								本人上门
							</span>
							<span>
								<input type="checkbox" name="sex"/>
								学生上门
							</span>
							<span>
								<input type="checkbox" name="sex"/>
								网上辅导
							</span>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">薪资要求:</label>
						<div class="inputBox fl">
							<input type="text" placeholder=""/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">外语授课:</label>
						<div class="charWrap fl">
							<span>
								<input type="radio" name="language"/>
								可以
							</span>
							<span>
								<input type="radio" name="language"/>
								不可以
							</span>
						</div>
					</div>
				 </div>
				 <div class="bgwhite  infoBoxpart inforPart2">
				 	<div class="clearfix inputBoxmt pl_15">
						<label class="fl">所获证书:</label>
						<div class="inputBox fl">
							<input type="text" placeholder="示例：大学六级英语/雅思8.0分"/>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">自我评价:</label>
						<div class="textareaBox fl">
							<textarea placeholder="描述您的教学精力，所获荣誉等"></textarea>
						</div>
					</div>
					<div class="clearfix inputBoxmt pl_15">
						<label class="fl">教学案例:</label>
						<div class="textareaBox fl">
							<textarea placeholder="示例：2015年5月，为高三李丽同学补习英语，帮助她在高考英语提高40分的好成绩"></textarea>
						</div>
					</div>
					<a href="javascript:void(0)" class="loginBtn">保存</a>
				 </div>
			</form>
			</div>
	
			
		</div>
		
		<!--底部-->
		<div class="footer">
			<a href="javascript:;" title="返回顶部" class="up-btn" id="back-to-top"></a>
			<div class="footer-msg">
				<img src="images/qrcode.png" class="fl qrcode" />
				<div class="msg-txt fr">
					<p><a href="" class="colorBlue">触屏版</a>|<a href="">电脑版</a></p>
					<p>copyRight@2017-2018</p>
					<p>版权所有：智必达家教</p>
				</div>
			</div>
			<div class="bottom">
				<ul>
					<li>
						<a href="" class="kf">在线客服</a>
					</li>
					<li>
						<a href="" class="tel">400-0000-0000</a>
					</li>
					<li>
						<a href="" class="jiaoyuan">预约教员</a>
						<img src="images/close-btn.png"/>
					</li>
				</ul>
			</div>
			
		</div>
		<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
		<script>
			$(function(){
				$("ul.subject li").click(function(){
					chooseInfo(this);
				})
				$("ul.teachArea li").click(function(){
					chooseInfo(this);
				})
				$("ul.subjectright").on("click","li",function(){
					$(this).css("background","#efefef").siblings("li").css("background","#fff");
					$(this).find("img").css("display","block").parent("li").siblings("li").find("img").css("display","none");
				});
				$("ul.teachArearight").on("click","li",function(){
					$(this).css("background","#efefef").siblings("li").css("background","#fff");
					$(this).find("img").css("display","block").parent("li").siblings("li").find("img").css("display","none");
				})
			})
			function chooseInfo(obj){
				
				var isclick = $(obj).attr("attr-click");
					if(isclick=="on"){
						$(obj).css("background","#efefef").siblings("li").css("background","#fff");
						var subName = $(obj).text();
						var doc ='';
							doc+='<li>'+subName+'';
								doc+='<img src="images/close-btn.png" class="removeInfo" onclick="removeInfo(this)"/>';
							doc+='</li>';
						$(obj).parent("ul").next("ul").append(doc);
						$(obj).attr("attr-click","off");
					}
			}
			function removeInfo(obj){
				$(obj).parent("li").remove();
			}
		</script>
	</body>
</html>
